import popupInfo from "../../components/popupInfo.js";
import squareButton from "../../components/squareButton.js";
import {ResultCode} from "../../network.js";

export default {
    components: {
        'popup-info': popupInfo,
        'square-button': squareButton,
    },
    props: {
        id: String
    },
    setup(props, ctx) {
        const diseaseName = Vue.ref("疾病名称");
        const info = Vue.ref("介绍");
        const cureTime = Vue.ref("治愈时间");
        const infectious = Vue.ref("传染性");
        const department = Vue.ref("所属科室");
        const popup = Vue.ref(null);

        function backToIndex() {
            router.push({path: "/"});
        }

        function onExitClick() {
            popup.value.onConfirm = () => {
                router.back();
            };
            popup.value.show("确定返回上一界面吗？");
        }

        const router = VueRouter.useRouter();


        Vue.onMounted(() => {
            const id = parseInt(props.id);
            axios.post('/disease/id', {value: id})
                .then(response => {
                    console.log(response);
                    const responseResult = response.data;
                    if (responseResult.code === ResultCode.NEED_LOGIN) {
                        popup.value.onConfirm = backToIndex;
                        popup.value.onCancel = backToIndex;
                        popup.value.show(responseResult.message);
                    } else if (responseResult.code === ResultCode.SUCCESS) {
                        const data = responseResult.data;
                        cureTime.value = data.cureTime;
                        info.value = data['info'];
                        diseaseName.value = data['name'];
                        department.value = data['departmentName'];
                        infectious.value = data['infectious'] ? '有传染性' : '无传染性';
                    }
                });
        });

        return {
            diseaseName, info, cureTime, infectious,
            department, onExitClick, popup, router
        }
    },
    template: `<div class="container" style="height: 100%;">
    <popup-info
            ref="popup"
    ></popup-info>
    <square-button background-url="/images/exit_images/exit0.png"
                   :height=80
                   right="5%"
                   bottom="5%"
                   @onClick="onExitClick"
    ></square-button>
    <div style="position: fixed;height: 100%;width: 100%;
    background: url('/images/background/disease_info.png') no-repeat;background-size: 100% 100%;
    left: 0;top: 0;z-index: -1;
    "></div>
    <div style="height: 10%;">
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="upper-title my-font" style="font-size: 36px;color: #3c8955;">
                基本信息
            </div>
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-5" style="font-size: 36px;color: #3c8955;">
            <div class="my-font">
                疾病名:{{diseaseName}}
            </div>
        </div>
    </div>
    <hr style="border-top: 3px solid;"/>
    <div class="row" style="height: 30%;">
        <div class="col-md-3">
            <div class="my-font" style="font-size: 36px;">
                介绍：
            </div>
        </div>
        <div class="col-md-9 my-font" style="font-size: 24px;">
            {{info}}
        </div>
    </div>
    <hr style="border-top: 3px solid;"/>
    <div class="row">
        <div class="col-md-3">
            <div class="my-font" style="font-size: 36px;">
                治疗周期：
            </div>
        </div>
        <div class="col-md-9 my-font" style="font-size: 36px;">
            {{cureTime}}
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="my-font" style="font-size: 36px;">
                传染性：
            </div>
        </div>
        <div class="col-md-9 my-font" style="font-size: 36px;">
            {{infectious}}
        </div>
    </div>
    <hr style="border-top: 3px solid;"/>
    <div class="row">
        <div class="col-md-3">
            <div class="my-font" style="font-size: 36px;">
                所属科室：
            </div>
        </div>
        <div class="col-md-9 my-font" style="font-size: 36px;">
            {{department}}
        </div>
    </div>
    </div>
`
}